<template>
    <div class="hot-nav">
        <div class="hot-nav-content">
            <div class="nav-content-inner">
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png" alt="">
                    <span>限时秒杀</span>
                </a>
            </div>
        </div>
        <div class="hot-nav-bottom">
            <div class="hot-nav-bottom-inner" :style = "innerBarStyle"></div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {
            //1屏幕的宽度
            screenW:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
            //滚动内容的宽度
            scrollContentW:550,
            //滚动背景条的宽度
            bgBarW:100,
            //滚动条的长度
            barXWidth:0,
            //1移动起点
            startX:0,
            //2记录结束点
            endFlag:0,
            //3滚动条移动的距离
            barMoveWidth:0,

        }
    },
    mounted(){
        this.getBottomBarWidth();
        this.bindEvent();
    },
    methods:{
        //获取滚动条的长度
        getBottomBarWidth(){
            this.barXWidth = (this.screenW / this.scrollContentW) * this.bgBarW
        },
        //移动段事件监听
        bindEvent(){
            this.$el.addEventListener('touchstart',this.handleTouchStart,false);
            this.$el.addEventListener('touchmove',this.handleTouchMove,false);
            this.$el.addEventListener('touchend',this.handleTouchEnd,false);

        },
        //开始触摸
        handleTouchStart(event){
            // console.log(event.touches);
            //获取第一个触电
            let touch = event.touches[0];
            //求出起始点
            this.startX = Number(touch.pageX);
            console.log(this.startX);
            
        },
        //开始移动
        handleTouchMove(){
            // console.log('开始移动');
            //获取第一个触点
            let touch = event.touches[0];
            //求出移动的距离
            let moveWidth = Number(touch.pageX) - this.startX;
            this.barMoveWidth  = -((this.bgBarW / this.scrollContentW) * moveWidth - this.endFlag);
            //边界值处理
            if (this.barMoveWidth <= 0) {
                this.barMoveWidth = 0;
            }else if (this.barMoveWidth >= this.bgBarW - this.barXWidth) {
                this.barMoveWidth = this.bgBarW - this.barXWidth;
            }

        },
        //结束触摸
        handleTouchEnd(){
            // console.log('结束移动');
            this.endFlag = this.barMoveWidth
        }
    },
    computed:{
       innerBarStyle(){
           return{
               width:`${this.barXWidth}px`,
               left:`${this.barMoveWidth}px`,
           }
       },
    },
    components: {

    }
}
</script>

<style scoped lang="stylus">
    .hot-nav
        width 100%
        height 180px
        background-color #fff
        position relative
        padding-bottom 10px
        .hot-nav-content
            width 100%
            overflow-x scroll
            .nav-content-inner
                width 550px
                height 180px
                display flex
                flex-wrap wrap
                .inner-item
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    width 90px
                    height 90px
                    font-size 14px
                    color #666
                    img 
                        width 40% 
                        margin-bottom 10px
        .hot-nav-content::-webkit-scrollbar
            display none
        .hot-nav-bottom
            width 100px
            height 2px
            position absolute
            left 50%
            margin-left -50px
            background-color #999
            bottom 8px
            .hot-nav-bottom-inner
                background-color orangered
                
                height 100%
                position absolute
                left 0

                    




         

                

            


</style>
